<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 语法示例</title>
</head>
<body>
<p>var 的设计可以看作 JavaScript 语言设计上的错误，但是这种错误无法修复，以为需要向后兼容</p>
<p>大概十年前, Brendan Eich 就决定添加一个更加完善的关键字: let</p>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<hr />
<p>const 修饰的变量无法再赋值.</p>
<p>const 定义时必须赋值.</p>
<p>const 定义的对象不能修改, 但是可以修改内部的值.</p>
<p style="color: red">在 ES6 开发中, 优先使用const, 只有需要改变某一个标识符的值时才使用let.</p>
</body>
<script type="text/javascript">
    // var 没有块级作用域
    // if (true) {
    //     var name = "test";
    // }
    // console.log(name);

    var btns = document.getElementsByTagName('button');
    // for (var i = 0;i < btns.length;i++) { // 使用var, i最终会变成5
    for (let i = 0;i < btns.length;i++) {
        btns[i].addEventListener('click', function () {
            console.log("第" + (i + 1) + "个按钮被点击了");
        });
    }
    i = 10;

    /**
     * 对象字面量增强写法
     */
    const name = 'ddd';
    const age = 18;
    // const obj = new Object();
    const obj = {
        name: name,
        age: age,
        run: function () {
            console.log('奔跑');
        }
    }; // 字面量
    const obj_es6 = {
        name, age,
        run() {
            console.log('奔跑');
        }
    };
    console.log("obj = ", obj)
    console.log("obj_es6 = ", obj_es6)

    function sum(...nums) {
        let result = 0;
        for (let num of nums) {
            result += num;
        }
        return result;
    }

    console.log("sum = ", sum(10, 10, 20, 2, 1, 3, 23, 12.1));

    const array = [10, 20, 30, 40, 50];
    array.splice(1, 3, 'a', 'v'); // 从下标1开始先删除3个元素, 再从下标1开始添加 'a', 'v' 两个元素
    array.splice(1, 0, 'a', 's', 'd'); // 从下标1开始，添加 'a', 's', 'd' 三个元素
    array.splice(1); // 从下标1开始删除所有元素
    array.splice(1, 2); // 从下标1开始删除2个元素

    for (let i = 0; i < 100; i++) {
        array.push(i);
    }

    // 取出所有小于 25 的数字
    console.log(array.filter(n => n < 25));

    // 所有数组元素✖️2
    console.log(array.map(n => n * 2));

    // 求数组的和
    console.log(array.reduce((f1, f2) => f1 + f2));


    // 箭头函数中的this 是最近作用域的this
    // 普通函数是调用位置的this
    const lambda = {
      aaa() {
        setTimeout(function () {
          console.log(this); // window
        });

        setTimeout(() => {
          console.log(this); // lambda 对象
        });
      }
    };

    lambda.aaa();
</script>
</html>
